<template>
	<view class="page-register-content">
		<!--顶部导航栏-->
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
				:class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
				{{tab.name}}
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :current="navIndex" @change="tabChange" class="register-content">
			<swiper-item class="swiper_item ">
				<Apply v-if="navIndex===0"/>
			</swiper-item>
			<swiper-item class="swiper_item">
				<Ghostwrite v-if="navIndex===1"/>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import Apply from './components/Apply.vue'
	import Ghostwrite from './components/Ghostwrite.vue'
	export default {
		components: {
			Apply,
			Ghostwrite,
		},
		data() {
			return {
				scrollTop: 0,
				navIndex: 0,
				tabBars: [{
					name: '我申请的',
					id: 'apply'
				}, {
					name: '我代写的',
					id: 'ghostwrite'
				}],
				candidates: [1, 2], //可输入下拉框数据
			}
		},
		methods: {
			// 更改tab选中索引
			checkIndex(index) {
				this.navIndex = index;
				console.log(index)
			},
			// 滚动条记忆
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//滑动切换swiper
			tabChange(e) {
				const navIndex = e.detail.current
				this.navIndex = navIndex
			},
			// selec改变
			selectname(name) {
				this.Name = name;
			},
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden !important;
	}

	.page-register-content {
		// height: 100%;
		height: calc(100% - 96rpx);
		// padding-bottom: 220rpx;
		//#ifdef MP-ALIPAY
		height: 90vh;
		//#endif
		.register-content {
			// min-height: 500rpx;
			// margin-top: 26rpx;
			height: calc(100% - 108rpx);
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			color: #CCCCCC;
			//#ifdef MP-ALIPAY
			display: flex;
			justify-content: space-around;
			background: #fff;
			//#endif
		}

		::v-deep.uni-scroll-view-content {
			display: flex;
			justify-content: space-around;
			background: #fff;
			// padding: 34rpx 0;
		}

		.scroll-view-item_H {
			display: inline-block;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			padding: 34rpx 0;
		}

		.activite {
			font-weight: bold;
			color: #333333;
			border-bottom: 1px solid #53B3D9;
		}
	}
</style>
